import classNames from "classnames";
import React, { useContext, useEffect, useState } from "react";
import { Edit, Refresh, Delete, CaretDown } from "@ct0/icons";
import { ThemeContext } from "../theme";
import type { CardProps } from "./type";
import { useStyles } from "./styles";

export default function Card({
  title,
  children,
  className,
  style,
  collapsible = false,
  defaultCollapse = true,
  collapse: propsCollapse,
  contentOverflow,
  onMore,
  onEdit,
  onCollapse,
  onRefresh,
  onDelete,
}: CardProps) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });
  // 折叠的状态
  const [collapse, setCollapse] = useState(() => {
    if (propsCollapse === undefined) return collapsible && defaultCollapse;
    else return propsCollapse;
  });

  useEffect(() => {
    if (propsCollapse !== undefined) setCollapse(propsCollapse);
  }, [propsCollapse]);

  const inlineStyle: React.CSSProperties = { ...style };

  if (collapse) {
    inlineStyle.height = "44px";
    inlineStyle.overflow = "hidden";
  }

  return (
    <div
      data-card-testid="card"
      className={classNames(classes.card, className)}
      style={inlineStyle}
    >
      <div
        data-card-testid="title"
        className={classes.title}
        onClick={() => {
          if (collapsible) {
            propsCollapse === undefined && setCollapse(!collapse);
            onCollapse?.(!collapse);
          }
        }}
      >
        <div className={classes.titleLeft}>
          <span className={classes.mainTitle}>{title}</span>
          {collapsible && (
            <span
              data-card-testid="arrow"
              className={classNames(
                classes.icon,
                classes.arrowRight,
                !collapse && classes.arrowDown
              )}
            >
              <CaretDown />
            </span>
          )}
          {onEdit && (
            <span
              data-card-testid="edit"
              className={classes.editIcon}
              onClick={(e) => {
                e.stopPropagation();
                onEdit();
              }}
            >
              <Edit />
            </span>
          )}
        </div>
        <div className={classes.operation}>
          {onMore && (
            <span
              data-card-testid="more"
              onClick={(e) => {
                e.stopPropagation();
                onMore();
              }}
            >
              更多
            </span>
          )}
          {onRefresh && (
            <span
              data-card-testid="refresh"
              onClick={(e) => {
                e.stopPropagation();
                onRefresh();
              }}
            >
              <Refresh />
            </span>
          )}
          {onDelete && (
            <span
              data-card-testid="delete"
              onClick={(e) => {
                e.stopPropagation();
                onDelete();
              }}
            >
              <Delete />
            </span>
          )}
        </div>
      </div>
      {children && (
        <div
          className={classNames(classes.content, collapse && classes.collapse)}
          style={contentOverflow ? { overflow: contentOverflow } : undefined}
          data-card-testid="content"
        >
          {children}
        </div>
      )}
    </div>
  );
}
